/*
 * @Author: xiaosihan 
 * @Date: 2024-08-18 17:05:49 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-19 21:58:13
 */

// 右侧面板

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./rightPlane.module.less";
import rightPlaneStore from "./rightPlaneStore";
import clsx from "clsx";
import Attribute from "./Attribute/Attribute";
import MessageList from "./MessageList/MessageList";

// 右侧面板
export default function RightPlane() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [show, setShow] = useState(rightPlaneStore.show);
    const [rightPlaneTab, setRightPlaneTab] = useState(rightPlaneStore.rightPlaneTab);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setShow(rightPlaneStore.show);
        setRightPlaneTab(rightPlaneStore.rightPlaneTab);
    }), []);

    return (
        <div className={clsx(styles.rightPlane, show && styles.show)} >
            <div className={styles.menu} >
                <span
                    className={clsx(styles.menu_itme, rightPlaneTab === "question" && styles.active)}
                    onClick={() => {
                        rightPlaneStore.setRightPlaneTab("question");
                    }}
                >问题</span>
                <span
                    className={clsx(styles.menu_itme, rightPlaneTab === "attribute" && styles.active)}
                    onClick={() => {
                        rightPlaneStore.setRightPlaneTab("attribute");
                    }}
                >属性</span>
            </div>

            {rightPlaneTab === "question" && <MessageList />}

            {rightPlaneTab === "attribute" && <Attribute />}

        </div>
    );

}